
import React from 'react'
// import { ListView } from 'antd-mobile';
import axios from 'axios'
import * as API from '../../uitls/mainPageApi'
import MainStoreLi from './MainStoreLi'
import './list.css'
// const data = [

//     { store_id: 1, store_name: '百果园-南街店', lv: 3, m_sold: 1234, time: 20, vipcount: 9.3, state: 1, qisong: 0, peisong: 2, fengmian: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2523032856,715213314&fm=26&gp=0.jpg" },
//     { store_id: 2, store_name: '花果山-北门店', lv: 3, m_sold: 1234, time: 20, vipcount: '', state: 1, qisong: 0, peisong: 2, fengmian: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2523032856,715213314&fm=26&gp=0.jpg" },
//     { store_id: 3, store_name: '炸鸡-南街店', lv: 3, m_sold: 1234, time: 20, vipcount: 9.3, state: 0, qisong: 0, peisong: 2, fengmian: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2523032856,715213314&fm=26&gp=0.jpg" },
//     { store_id: 4, store_name: '百果园-南街店', lv: 3, m_sold: 1234, time: 20, vipcount: 9.3, state: 1, qisong: 0, peisong: 2, fengmian: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1564510308,2644753170&fm=26&gp=0.jpg" },
//     { store_id: 5, store_name: '百果园-南街店', lv: 3, m_sold: 1234, time: 20, vipcount: 9.3, state: 0, qisong: 0, peisong: 2, fengmian: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2523032856,715213314&fm=26&gp=0.jpg" },
//     { store_id: 6, store_name: '花果山-南街店', lv: 3, m_sold: 1234, time: 20, vipcount: 9.3, state: 1, qisong: 0, peisong: 2, fengmian: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=21129812,1397270942&fm=26&gp=0.jpg" },
//     { store_id: 7, store_name: '百果园-南街店', lv: 3, m_sold: 1234, time: 20, vipcount: 9.3, state: 1, qisong: 0, peisong: 2, fengmian: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2523032856,715213314&fm=26&gp=0.jpg" },
//     { store_id: 8, store_name: '百果园-南街店', lv: 3, m_sold: 1234, time: 20, vipcount: 9.3, state: 1, qisong: 0, peisong: 2, fengmian: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2523032856,715213314&fm=26&gp=0.jpg" },
//     { store_id: 9, store_name: '百果园-南街店', lv: 3, m_sold: 1234, time: 20, vipcount: 9.3, state: 1, qisong: 0, peisong: 2, fengmian: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2523032856,715213314&fm=26&gp=0.jpg" },
//     { store_id: 10, store_name: '百果园-南街店', lv: 3, m_sold: 1234, time: 20, vipcount: 9.3, state: 1, qisong: 0, peisong: 2, fengmian: "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3405927412,2227610065&fm=26&gp=0.jpg" },

// ];

class List extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef();
        this.state = {
            datasource: [],
            isbottom: false,
            iscangetnewdata: false,
            bottomtips: '正在查找店铺···',
            currentPage: 1,
            pageSize: 1,
            countPage: 10,
        }
    }
    innitcurrentpage = () => {
        this.setState({
            currentPage: 1
        })
    }
    getData = (postdata, isReLoad) => {


        console.log(postdata)
        this.axios({
            url: API.GET_STORELIST,
            method: 'get',
            params: postdata
        }).then(data => {
            // console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~')
            console.log(data.data.dataList)
            let getdata = data.data.dataList

            let newdata = []


            if (this.state.datasource.length >= 30) {
                newdata = this.state.datasource.slice(10)

            }
            if (isReLoad) {
                newdata = []
            } else {
                newdata = [...this.state.datasource]
            }

            newdata = newdata.concat(getdata)


            // console.log(111111111111111)
            this.setState({
                currentPage: this.state.currentPage + 1,
                countPage: data.data.totalPage,
                datasource: newdata,

            })
            // console.log(2222222222)

        })
    }
    componentDidMount() {
        const { serachData } = this.props
        this.props.onRef(this)

        console.log('请求了商店数据~~~~~~~~~~~~~~~~~~')
        let postdata = { ...serachData, currentPage: this.state.currentPage, pageSize: 1 }
        this.getData(postdata, false)
        /* 监控滚动 */
        window.onscroll = () => {

            const tipsdom = this.myRef.current.getBoundingClientRect();
            // console.log(parseInt(tipsdom.bottom) + 110)
            // console.log(document.body.clientHeight)

            // console.log('~~~~~~~~~~~~~~~~~~~~~~~~')

            if (parseInt(tipsdom.bottom) + 110 <= document.body.clientHeight) {
                // console.log('到地里了')
                if (!this.state.isbottom) {
                    this.setState({
                        iscangetnewdata: true
                    })
                } else {
                    this.setState({
                        iscangetnewdata: false
                    })
                }
                this.setState({
                    isbottom: true,

                })


            } else {

                this.setState({
                    isbottom: false
                })

            }
            if (this.state.isbottom && this.state.iscangetnewdata) {
                setTimeout(this.updateData, 100)
                // this.updateData()
            }

        }
        // this.addDistance('花样年福年广场')

    }
    componentWillUnmount() {
        console.log('卸载前')
        window.onscroll = '';
        //window.removeEventListener('scroll', this.handler.bind(this),false)
    }
    //加载新数据
    updateData = () => {
        let { serachData } = this.props
        if (this.state.countPage >= this.state.currentPage) {
            let postdata = { ...serachData, currentPage: this.state.currentPage, pageSize: 1 }
            this.getData(postdata, false)
        }

        console.log('加载数据中+++++++++++++++++++')

    }
    //添加距离数据
    addDistance = (address) => {
        console.log('请求地址')
        axios({
            url: `https://restapi.amap.com/v3/geocode/geo?key=6c11990ede40ff54f4401b963120730f&address=四川省成都市武侯区簇锦街道武科东三路,四川省成都市高新区桂溪街道云华路233号&batch=true`,
            type: 'get',
            dataType: 'jsonp',
        }).then(data => {
            console.log(data)
            // console.log(data.data.regeocode.aois[0]); console.log(data.data.regeocode.pois);
            // return this.setState({
            //     aoisdata: data.data.regeocode.aois[0],
            //     poisdata: data.data.regeocode.pois,
            //     isloading: false
            // })

            // this.setState({ poisdata: data.data.regeocode.pois })

        })
    }
    render() {
        let show = []
        // console.log("item.vipcount");
        // console.log(item.vipcount);
        // let { serachData } = this.props
        // console.log(serachData)
        let { datasource, bottomtips } = this.state
        show = datasource.map((item, index) => {
            if (item.vip_discount) {
                // console.log(11111)
                show = <MainStoreLi key={index} item={item}><div className='vip-count'><span>会员</span><span>{item.vip_discount}折</span></div></MainStoreLi>


            }
            else {
                // console.log(222)
                show = <MainStoreLi key={index} item={item}></MainStoreLi>
            }
            return show
        })
        // console.log(show)

        return (
            /* html */
            <div>
                <div

                    // onScroll={this.onScroll(serachData)}
                    className="scroll">
                    {show}
                    {/* <span>回顶部</span> */}

                </div>
                <div className='bottom-tips' ref={this.myRef}><span className={this.state.isbottom ? 'iconfont icon-jiazai' : ""}></span>{bottomtips}</div>
            </div>


        )
    }
}

export default List